<template>
  <div class="home-container">
    <div class="hero-section">
      <h1>大学生就业成熟度评估系统</h1>
      <p class="subtitle">通过专业的评估，提升您的就业竞争力</p>
      <el-button type="primary" size="large" @click="startAssessment" class="start-button">
        开始评估
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>

    <div class="features-section">
      <div class="feature-item">
        <div class="feature-icon">
          <el-icon><User /></el-icon>
        </div>
        <h3>专业评估</h3>
        <p>基于大语言模型的智能评估系统，从6个维度全面分析您的就业准备情况</p>
      </div>
      <div class="feature-item">
        <div class="feature-icon">
          <el-icon><ChatDotSquare /></el-icon>
        </div>
        <h3>链式提问</h3>
        <p>通过交互式对话，深入了解您的职业规划、专业能力和求职准备</p>
      </div>
      <div class="feature-item">
        <div class="feature-icon">
          <el-icon><Document /></el-icon>
        </div>
        <h3>详细报告</h3>
        <p>生成个性化的分析报告，包含评分、详细分析和改进建议</p>
      </div>
    </div>

    <div class="dimensions-section">
      <h2>评估维度</h2>
      <div class="dimensions-list">
        <el-card v-for="(dim, index) in dimensions" :key="index" class="dimension-card">
          <h3>{{ dim.name }}</h3>
          <p>{{ dim.description }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElButton, ElCard } from 'element-plus';
import { User, ChatDotSquare, Document, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();

// 评估维度数据
const dimensions = [
  {
    name: '职业认知',
    description: '对自身职业定位、行业了解和职业发展路径的认识程度'
  },
  {
    name: '专业能力',
    description: '与所学专业相关的知识储备和实践能力'
  },
  {
    name: '通用技能',
    description: '沟通协作、问题解决、时间管理等职场通用能力'
  },
  {
    name: '求职准备',
    description: '简历制作、面试技巧、求职渠道利用等求职相关准备'
  },
  {
    name: '职业素养',
    description: '职业道德、工作态度、责任感等职业相关素养'
  },
  {
    name: '心理准备',
    description: '对职场压力、角色转变、职业挫折的心理承受能力'
  }
];

// 生成唯一的对话ID
const generateConversationId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
};

// 开始评估
const startAssessment = () => {
  const conversationId = generateConversationId();
  router.push(`/assessment/${conversationId}`);
};
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  padding: 2rem 0;
}

.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-bottom: 3rem;
  border-radius: 12px;
}

.hero-section h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.start-button {
  font-size: 1.1rem;
  padding: 0.8rem 2rem;
}

.features-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  margin-bottom: 3rem;
}

.feature-item {
  text-align: center;
  max-width: 300px;
  flex: 1;
  min-width: 250px;
}

.feature-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.feature-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.feature-item p {
  color: #666;
  line-height: 1.6;
}

.dimensions-section {
  padding: 2rem;
}

.dimensions-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
  font-size: 2rem;
}

.dimensions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.dimension-card {
  transition: transform 0.3s ease;
}

.dimension-card:hover {
  transform: translateY(-5px);
}

.dimension-card h3 {
  color: #667eea;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .features-section {
    flex-direction: column;
    align-items: center;
  }
}
</style>